Vue.component('tabs', {
    template: '\
		<div class="tabs"> \
			<div class="tabs-bar"> \
                <!-- 标签页标题，这里要用v-for --> \
                <div \
                    v-for="(item,index) in navList" \
					:class="tabCls(item)"> \
                    <span @click="handleChange(index)">{{ item.label }}</span> \
                    <span \
                        class="close-btn" \
                        v-show="item.closabel" \
                        @click="closeTab(index)">x</span> \
                </div> \
			</div> \
			<div class="tabs-content"> \
				<!-- 这里的slot就是嵌套的pane --> \
				<slot></slot> \
			</div> \
		</div>',
    props: {
        // 这里的value是为了可以使用v-model
        value: {
            type: [String, Number]
        }
    },
    data: function () {
        return {
            // 因为不能修改value,所以复制一份自己维护
            currentValue: this.value,
            // 用户渲染tabs的标题
            navList: []
        }
    },
    methods: {
        closeTab: function (index) {
            var tmp = this.navList[index];
            this.getTabs().forEach(function (pane, index) {
                if (pane.name === tmp.name) {
                    pane.show = false;
                }
            })

            this.navList.splice(index, 1);
            this.currentValue = this.navList.length === 0 ? -1 : this.navList[0].name;
        },
        tabCls: function (item) {
            return [
                'tabs-tab',
                {
                    // 给当前选中的tab加一个class
                    'tabs-tab-active': item.name === this.currentValue
                }
            ]
        },
        getTabs: function () {
            /**
             * 通过遍历子组件，得到所有的pane组件
             * filter为jquery遍历方法
             * $options为vue的api，此处使用[item.name === 'pane']效果一样
             */
            return this.$children.filter(function (item) {
                return item.$options.name === 'pane';
            })
        },
        updateNav: function () {
            this.navList = [];
            var _this = this;

            this.getTabs().forEach(function (pane, index) {
                _this.navList.push({
                    label: pane.label,
                    name: pane.name || index,
                    closabel: pane.closabel
                });
                // 如果没有给pane设置name，默认设置它的索引
                if (!pane.name) pane.name = index;
                // 设置当前选中的tab的索引
                if (index === 0) {
                    if (!_this.currentValue) {
                        _this.currentValue = pane.name || index;
                    }
                }
            });

            this.updateStatus();
        },
        updateStatus() {
            var tabs = this.getTabs();
            var _this = this;
            // 显示当前选中的tab对应的pane组件，隐藏没有选中的
            tabs.forEach(function (tab) {
				tab.removeIt = tab.name != _this.currentValue;
				setTimeout(function(){
					tab.show = tab.name === _this.currentValue;
				},500);
            })
			
        },
        // 点击tab标题时触发
        handleChange: function (index) {
            var nav = this.navList[index];
            var name = nav.name;
            // 改变当前的tab，并触发下面的watch
            this.currentValue = name;
            // 更新value
            this.$emit('input', name);
            // 触发一个自定义事件，供父级使用，本例没有用到
            // this.$emit('on-click', name);
        },
    },
    watch: {
        value: function (val) {
            this.currentValue = val;
        },
        currentValue: function () {
            // 在当前选中的tab发生变化时，更新pane的显示状态
            this.updateStatus();
        }
    }
})
